import userStore from "@/store/userStore"
import {
  reqOrderList,
  reqUpdateOrderStatus,
  reqRemoveOrderById
} from '@/api/order'
import {
  reqAddComment
} from '@/api/comment'
import {
  ComponentWithStore
} from "mobx-miniprogram-bindings"
import {
  modal,
  toast
} from "@/utils/extendApi"
import {
  reqRemovePic,
  reqUpload
} from "@/api/common"
import verifier from "@/utils/verifier"

ComponentWithStore({

  data: {
    vanTabList: [{
        title: '待搬运',
        name: 1
      },
      {
        title: '搬运中',
        name: 2,
      },
      {
        title: '已完成',
        name: 3
      }, {
        title: '待评价',
        name: 4
      }
    ],
    orderQueryParams: {
      userId: '',
      orderId: '',
      orderStatus: 1,
      page: 1,
      pageSize: 10
    },
    orderList: [],
    total: '',
    isLoading: false,
    isFinished: false,
    showComment: false,
    tempOrder: {},
    comment: {
      stars: 0,
      pic: '',
      content: ''
    },
    fileList: []
  },
  storeBindings: [{
    store: userStore,
    fields: ['token', 'userInfo'],
  }, ],
  methods: {

    async uploadPic(event) {
      const {
        file
      } = event.detail
      console.log(file)
      const res = await reqUpload(file.url)
      this.data.fileList.push({
        url: res.data
      })
      this.setData({
        fileList: this.data.fileList
      })
    },

    async deletePic(event) {
      const {
        file,
        index
      } = event.detail
      console.log(file.url)
      await reqRemovePic(file.url)
      this.data.fileList.splice(index, 1)
      this.setData({
        fileList: this.data.fileList
      })
    },
    async switch (event) {
      console.log('orderStatus', event.detail.name)
      this.setData({
        'orderQueryParams.orderStatus': event.detail.name,
        'orderQueryParams.page': 1,
        isFinished: false
      })
      await this.refreshOrderList()
    },
    async finishOrder(event) {
      const order = event.target.dataset.order
      order.orderStatus = 3
      await reqUpdateOrderStatus(order)
      await this.refreshOrderList()
    },
    async deleteOrder(event) {
      const order = event.target.dataset.order
      const res = await modal({
        content: '你确定删除该订单吗? '
      })
      if (!res) {
        return
      }
      await reqRemoveOrderById(order.id)
      await this.refreshOrderList()
    },
    changeCommentContent(event) {
      this.setData({
        'comment.content': event.detail.value
      })
    },
    toComment(event) {
      this.setData({
        tempOrder: event.target.dataset.order
      })
      this.setData({
        showComment: true
      })
    },

    async submitComment() {
      if (this.data.comment.stars === 0) {
        toast({
          title: '请给予星级的评价'
        })
        return
      }
      let pic = ''
      this.data.fileList.forEach(item => {
        pic = pic + item.url + ';'
      })
      // 图片字符串数组
      pic = pic.substr(0, pic.length - 1)
      this.setData({
        'comment.pic': pic ? pic : ''
      })
      await reqAddComment(this.data.comment)
      this.data.tempOrder.orderStatus = 4
      await reqUpdateOrderStatus(this.data.tempOrder)
      toast({
        title: '评价成功',
        icon: 'success'
      })
      this.setData({
        showComment: false,
        'comment.stars': 0,
        'comment.content': '',
        'comment.pic': '',
        fileList: []
      })
      this.refreshOrderList()
    },
    closeComment() {
      console.log('关闭评价弹框')
      this.setData({
        showComment: false,
        'comment.stars': 0,
        'comment.content': '',
        'comment.pic': '',
        fileList: []
      })
    },

    changeStarLevel(event) {
      this.setData({
        'comment.stars': event.detail
      })
    },
    checkQueryParams() {
      const orderId = this.data.orderQueryParams.orderId
      if (orderId === '') return true
      if (verifier.onlyContainNumber(orderId)) return true
      toast({
        title: '请输入合法的订单ID'
      })
      return false
    },
    async refreshOrderList() {
      if (!this.checkQueryParams()) {
        return
      }
      const res = await reqOrderList(this.data.orderQueryParams)
      this.setData({
        orderList: res.data.records,
        total: res.data.total
      })
    },
    async changeQueryOrderId(event) {
      this.setData({
        'orderQueryParams.orderId': event.detail
      })
    },
    toLogin() {
      wx.redirectTo({
        url: '/pages/login/login',
      })
    },
    async onReachBottom() {
      if (!this.checkQueryParams()) {
        return
      }
      if (this.data.isLoading) return
      if (this.data.total <= this.data.orderList.length) {
        this.setData({
          isFinished: true
        })
        return
      }
      this.setData({
        'orderQueryParams.page': this.data.orderQueryParams.page + 1,
        isLoading: true
      })
      const res = await reqOrderList(this.data.orderQueryParams)
      this.data.orderList.push(...res.data.records)
      this.setData({
        orderList: this.data.orderList,
        total: res.data.total,
        isLoading: false
      })
    },
    async onPullDownRefresh() {
      this.setData({
        'orderQueryParams.page': 1,
        isFinished: false
      })
      await this.refreshOrderList()
      await wx.stopPullDownRefresh()
    }
  },
  pageLifetimes: {
    async show() {
      console.log('pageLifetimes--show')
      this.data.orderQueryParams.userId = this.data.userInfo.id
      await wx.showTabBar()
      if (this.data.token) {
        if (!this.checkQueryParams()) {
          return
        }
        const res = await reqOrderList(this.data.orderQueryParams)
        this.setData({
          orderList: res.data.records,
          total: res.data.total
        })
      }
    }
  }
})